<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 异步提交的库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <style>

        .container {
            margin-top: 15%;
            width: 35%;
        }

        .btn-primary {
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .form-control {
            margin-bottom: 4px;
        }


    </style>
</head>
<body>
<div class="container">

    <!--<div id="demo" v-show="show" class="alert alert-success">
        <span v-if="alert_tips">成功！很好地完成了提交。</span>
    </div>-->
    <form id="form">


        <div class="form-signin">
            <!--<h2 class="form-signin-heading">登录</h2>-->
            <!-- class="sr-only"将label标签隐藏 -->
            <label for="exampleInputUsername" class="sr-only">用户名</label>
            <!-- 会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 -->
            <input type="text" class="form-control" v-model="formObj.username" id="exampleInputUsername" name="username"
                   placeholder="用户名">
            <label for="exampleInputUsername" class="sr-only">密码</label>
            <input type="password" class="form-control" v-model="formObj.password" id="exampleInputPassword"
                   name="password"
                   placeholder="密码">

            <div class="checkbox">
                <label>
                    <input type="checkbox">
                    记住密码
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" onclick="ajaxRegister()" type="button">注册
            </button>
        </div>
    </form>
</div>
</body>
<script>

    function ajaxRegister() {
        //Vue的异步Get请求
        /*Vue.http.get("/test").then(function (res) {
            console.log(res.bodyText);
        }, function (res) {
            console.log(res.status);
        });*/


        var param = new FormData(document.getElementById("form"));
        // param = convert_FormData_to_json(param);
        console.log(param);
        Vue.http.post("/login", param).then(function (res) {

            console.log(res.bodyText);
            console.log("登录成功");
        }, function (res) {

            alert("登录失败");
        });


        return false;
    }

</script>
</html>
